<template>
  <Drawer placement="right" :closable="true" v-model="visible" width="400" @on-close="cancel">
    <template #header>
      <div class="flex flex-col justify-between">
        <div class="flex items-center mb-4 gap-x-2">
          <img
            src="~@/assets/images/icon_Input.jpg"
            class="w-6 h-6"
            alt="Start icon"
          />
          <div class="flex flex-col gap-y-1">
            <p class="text-lg font-semibold text-black">{{ title }}</p>
          </div>
        </div>
        <div class="text-sm text-gray-500">支持中间过程的信息输入</div>
      </div>
    </template>
    <CommonCollapse title="输入" tip="用户输入的信息会存储在对应的变量中">
      <template #right>
        <Button
          type="primary"
          size="small"
          icon="md-add"
          @click="addInput"
        ></Button>
      </template>
      <div class="panel-table">
        <div class="panel-table-header">
          <div class="name">变量名</div>
          <div class="name">变量类型</div>
          <div class="name">必填</div>
        </div>
        <div class="panel-table-list">
          <Form ref="formEl" :model="form" label-position="top">
            <template v-for="(item, index) in form.inoutlist" :key="index">
              <div class="flex items-center mb-4">
                <div class="panel-table-item" style="width: 120px">
                  <FormItem
                    :key="index"
                    :prop="'inoutlist.' + index + '.varname'"
                    :rules="{
                      required: true,
                      message: '变量名不可为空',
                      trigger: 'blur',
                    }"
                  >
                    <Input
                      v-model="item.varname"
                      placeholder="输入变量名"
                      size="small"
                      show-word-limit
                      maxlength="20"
                    />
                  </FormItem>
                </div>
                <div class="panel-table-item" style="width: 120px">
                  <FormItem>
                    <Select size="small" v-model="item.vartype">
                      <Option
                        v-for="type in BE_TYPE_LIST"
                        :value="type.value"
                        :key="type.value"
                        >{{ type.label }}</Option
                      >
                    </Select>
                  </FormItem>
                </div>
                <div class="panel-table-item center" style="width: 40px">
                  <FormItem>
                    <Checkbox
                      v-model="item.isrequired"
                      :true-value="true"
                      :false-value="false"
                    ></Checkbox>
                  </FormItem>
                </div>
                <div class="panel-table-item btn">
                  <Icon type="md-resize" @click="handleShowDesc(index)" />
                </div>
                <div class="panel-table-item btn" @click="removeInput(index)">
                  <Icon type="md-remove" />
                </div>
              </div>
              <div v-show="showDescList.includes(index)">
                <div class="w-full mt-1">
                  <p class="text-xs">默认值</p>
                  <Input
                    size="small"
                    v-model="item.defaultval"
                    class="w-full mt-1"
                    placeholder="参数默认值，在没有传入该参数时，将使用默认值"
                  ></Input>
                </div>
                <div class="w-full mt-1">
                  <p class="text-xs">描述</p>
                  <Input
                    size="small"
                    v-model="item.vardesc"
                    class="w-full mt-1"
                    placeholder="帮助大模型准确了解参数的作用"
                  ></Input>
                </div>
              </div>
            </template>
          </Form>
        </div>
      </div>
    </CommonCollapse>
  </Drawer>
</template>
<script setup>
import { ref } from 'vue';
import { BE_TYPE_LIST } from '../../lib/constant';
import CommonCollapse from '@/components/CommonCollapse/index.vue';

const props = defineProps({
  form: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: '输入',
  },
});
const emit = defineEmits(['add', 'remove', 'cancel']);

const visible = ref(false);

const showDescList = ref([]);
const handleShowDesc = (i) => {
  if (showDescList.value.includes(i)) {
    const showIndex = showDescList.value.indexOf(i);
    showDescList.value.splice(showIndex, 1);
    return;
  }
  showDescList.value.push(i);
};

// 组件的增删
const addInput = () => {
  emit('add');
};
const removeInput = (index) => {
  emit('remove', index);
};
const init = () => {
  visible.value = true;
};
const cancel = () => {
  visible.value = false;
  emit('cancel')
};

defineExpose({
  init,
});
</script>
<style lang="scss"></style>
